<template>
  <div class="search-box">
    <div class="container">
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem>{{ `搜索 "${search}" 的结果` }}</XtxBreadItem>
      </XtxBread>
      <div class="wrapper">
        <!-- 排序区 -->
        <SeachSort @change-filter="changeFilter"></SeachSort>
        <!-- 内容区 -->
        <ul class="goods-list" v-if="list.length !== 0">
          <li v-for="item in list" :key="item.id">
            <GoodsItem :goods="item"></GoodsItem>
          </li>
        </ul>
        <!-- 没有数据时展示 -->
        <div v-else class="none">
          <img src="../../assets/images/images/none.png" alt="" />
          暂无数据
        </div>
        <!-- 分页区 -->
        <XtxPagination
          :total="total"
          :current-page="reqParms.page"
          :page-size="reqParms.pageSize"
          @current-change="changePager"
          v-if="list.length !== 0"
        ></XtxPagination>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import SeachSort from './components/searc-sort.vue'
import { postSearchGoods } from '@/api/goods.js'
export default {
  name: 'Seach',
  components: { SeachSort },
  setup() {
    // 获取搜索参数
    const route = useRoute()
    const search = ref('')
    search.value = route.query.keyword
    // 分页切换
    // 1.准备好查询参数对象，页码和显示条数
    // 2.准备api函数
    // 3.组件初始化时发请求调用api拿到数据
    // 4.渲染列表和分页组件
    // 5.监听分页改变，更新列表
    const reqParms = reactive({
      page: 1,
      pageSize: 10,
      keyword: search.value,
      sortField: null,
      sortMethod: null
    })
    const list = ref([]) // 商品列表数据
    const total = ref(0) // 商品总数量
    const loadData = async () => {
      const { result } = await postSearchGoods(reqParms)
      list.value = result.pageData.items
      total.value = result.pageData.counts
    }
    onMounted(() => {
      loadData()
    })
    // 点击页码触发
    const changePager = page => {
      reqParms.page = page
      loadData()
    }
    // 点击排序触发
    const changeFilter = search => {
      reqParms.sortField = search.sortField
      reqParms.sortMethod = search.sortMethod
      reqParms.page = 1
      loadData()
    }
    // 搜索关键词改变触发
    onBeforeRouteUpdate((to, from, nex) => {
      search.value = to.query.keyword
      reqParms.keyword = search.value
      reqParms.sortField = null
      reqParms.sortMethod = null
      reqParms.page = 1
      loadData()
      nex()
    })
    return { search, reqParms, total, list, changePager, changeFilter }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  background: #fff;
  padding: 0 25px;
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
  .none {
    padding: 100px 0;
    text-align: center;
    color: #999;
    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      object-fit: contain;
    }
  }
}
</style>
